<template>
  <div class="Content">
<!--    第一行-->
    <el-row :gutter="20" class="mgb20">
<!--      用户模块-->
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{ConsumerCount}}</div>
              <div>用户数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
<!--      歌曲模块-->
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{SongCount}}</div>
              <div>歌曲总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
<!--      歌手模块-->
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{SingerCount}}</div>
              <div>歌手人数</div>
            </div>
          </div>
        </el-card>
      </el-col>
<!--      歌单模块-->
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{SongListCount}}</div>
              <div>歌单数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--    第二行-->
    <el-row :gutter="20" class="mgb20">
<!--      用户性别比例统计-->
      <el-col :span="12">
        <el-card>
        <h3 class="mgb20">用户性别比例</h3>
        <div style="background-color: white">
          <ve-pie :data="ConsumerSex" :theme="optionsCunsumer"></ve-pie>
        </div>
        </el-card>
      </el-col>
<!--      歌单风格数量统计-->
      <el-col :span="12">
        <el-card>
        <h3 class="mgb20">歌单风格数量</h3>
        <div style="background-color: white">
          <ve-histogram :data="SongListStyle" ></ve-histogram>
        </div>
        </el-card>
      </el-col>
    </el-row>
    <!--    第三行-->
    <el-row :gutter="20" class="mgb20">
      <!--      用户性别比例统计-->
      <el-col :span="12">
        <el-card>
          <h3 class="mgb20">歌手性别比例</h3>
          <div style="background-color: white">
            <ve-pie :data="SingerSex" ></ve-pie>
          </div>
        </el-card>
      </el-col>
      <!--      歌手国籍数量统计-->
      <el-col :span="12">
        <el-card>
          <h3 class="mgb20">歌手国籍分布</h3>
          <div style="background-color: white">
            <ve-histogram :data="SingerCountry" :theme="optionsSingerCountry"></ve-histogram>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getAllConsumer, getAllSinger, getallSong, getAllSongList} from "../api";

export default {
  name:"Info",
  data() {
    return {
      ConsumerCount:0 ,      //用户总数
      SingerCount:0,        //歌手总数
      SongCount:0,          //歌曲总数
      SongListCount:0,      //歌单总数
      Consumer:[],          //用户数据
      Song:[],              //歌曲数据
      Singer:[],            //歌手数据
      SongList:[],          //歌单数量
      ConsumerSex:{         //根据用户性别统计
        columns:['性别','总数'],
        rows:[
          {'性别':'女','总数':0},
          {'性别':'男','总数':0},
        ]
      },
      optionsCunsumer:{
        color:['#87cefa','#ffc0cb']
      },
      optionsSingerCountry:{
        color:['yellow']
      },
      SongListStyle:{     //根据歌单风格统计
        columns:['风格','总数'],
        rows:[
          {'风格':'华语','总数':0},
          {'风格':'粤语','总数':0},
          {'风格':'欧美','总数':0},
          {'风格':'日韩','总数':0},
          {'风格':'BGM','总数':0},
          {'风格':'轻音乐','总数':0},
          {'风格':'乐曲','总数':0},
          {'风格':'欧美','总数':0},
        ]
      },
      SingerSex:{         //根据歌手性别统计
        columns:['性别','总数'],
        rows:[
          {'性别':'女','总数':0},
          {'性别':'男','总数':0},
        ]
      },
      SingerCountry:{           //根据歌手国籍统计
        columns:['国籍','总数'],
        rows:[
          {'国籍':'中国','总数':0},
          {'国籍':'韩国','总数':0},
          {'国籍':'日本','总数':0},
          {'国籍':'美国','总数':0},
          {'国籍':'新加坡','总数':0},
          {'国籍':'意大利','总数':0},
          {'国籍':'马来西亚','总数':0},
          {'国籍':'西班牙','总数':0},
        ]
      }
    }
  },
  created:{

  },
  mounted(){
    this.getConsumerCount()
    this.getSongCount()
    this.getSingerCount()
    this.getSongListCount()
  },
  methods: {
    // 获取所有用户熟练
    getConsumerCount(){
      getAllConsumer().then(res =>{
         this.Consumer=res
         this.ConsumerCount=res.length
         this.ConsumerSex.rows[0]['总数']=this.setCounsumerSex(0,res)
         this.ConsumerSex.rows[1]['总数']=this.setCounsumerSex(1,res)
      })
    },
    // 根据性别获取用户数
    setCounsumerSex(sex,val){
      let count=0
      for(let item of val){
        if(sex==item.sex){
          count++
        }
      }
      return count
    },
    // 获取所有歌曲数量
    getSongCount(){
      getallSong().then(res =>{
        this.Song=res
        this.SongCount=res.length
      })
    },
    // 获取所有歌手数量
    getSingerCount(){
      getAllSinger().then(res =>{
        this.Singer=res
        this.SingerCount=res.length
        this.SingerSex.rows[0]['总数']=this.setSingerSex(0,res)
        this.SingerSex.rows[1]['总数']=this.setSingerSex(1,res)
        for(let item of res){
          this.setSingerCountry(item.location)
        }
      })
    },
    // 根据歌手地区统计
    setSingerCountry(location){
      for(let item of this.SingerCountry.rows){
        if(location.includes(item['国籍'])){
          item['总数']++
        }
      }
    },
    setSingerSex(sex,val){
      let count=0
      for(let item of val){
        if(sex==item.sex){
          count++
        }
      }
      return count
    },
    // 获取歌单所有数量
    getSongListCount(){
      getAllSongList().then(res =>{
        this.SongList=res
        this.SongListCount=res.length
        for(let item of res){
          this.setSongListStyle(item.style)
        }
      })
    },
    // 根据歌单风格统计数据
    setSongListStyle(style){
      for(let item of this.SongListStyle.rows){
        if(style.includes(item['风格'])){
          item['总数']++
        }
      }
    },
  }
}
</script>

<style  scoped>
  .grid-content{
    /*自由布局*/
    display: flex;
    align-items: center;
    height: 100px;
  }
  .grid-cont-center{
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: darkgray;
  }
  .grid-num{
    font-size: 30px;
    font-weight: bold;
  }
</style>
